<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
	<h:outputStylesheet>
		.logo-panel{
			display: flex;  
		    display: -webkit-flex;
		    justify-content: center;
		    align-items: center;
		}
		.logo-panel .logo{
			position:relative;
			height: 60px !important;
		    margin-bottom: 0px !important;
		}
		.logo-panel .title{
			text-align: left;
		}
	    .logo-panel .title {
			font-size:10px;
			font-weight: bold;
		}
		.logo-panel .title .code{
			font-size:15px;
			color:red;
		}
		
	</h:outputStylesheet>
	<h:outputStylesheet name="primeflex.css" library="primeflex" />
	<div class="logo-panel">
		<div class="p-grid nested-grid vertical-container">
			<div class="p-col-4  p-col-align-center">
				<p:graphicImage id="logo_me" name="images/me.jpg" library="assets"
					class="logo"  />
			</div>
			<div class="ui-g-8 p-col-align-end">
				<div class="p-grid title">
					<div class="ui-g-12 p-col-nogutter">
						<span style="display: block">Talk is cheap,</span> <span
							style="margin-left: 50px;">show me the </span> <span class="code">code.</span>
					</div>
					<div class="ui-g-12 p-col-nogutter">
						<span>少说废话，放 </span>
						<p:link class="code" outcome="/views/security/register" value="码" />
						<span>过来！</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</ui:composition>